import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.progress-bar .chart'));
const barColor =  ['#ed3f35', '#F18B2F','#1089E7', '#8B78F6','#008000']
// 指定图表的配置项和数据
const option = {
  title: {},
  tooltip: {},
  grid: {
    top: 0,
    left: '15%',
    right: '17%',
    bottom: '10%'
  },
  xAxis: {
    show: false
  },
  yAxis: [
    {
      inverse:true,
      type: 'category',
      data: ['中国', '印度', '美国', '德国', '巴西'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    {
      inverse:true,
      type: 'category',
      data: [491,1365674,6868958,233728,1168050],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    }
  ],
  series: [
    {
      name: '条',
      type: 'bar',
      barCategoryGap: 50,
      barWidth: 10,
      yAxisIndex: 0,
      itemStyle: {
        barBorderRadius: 20,
        /* 返回的是所有柱子的实例 */
        color(params) {
          return barColor[params.dataIndex];
        }
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{c}%',
        fontSize: '10'
      },
      data: [94.8, 88.9, 76.8, 89.7, 88.8]
    },
    {
      name: '框',
      type: 'bar',
      barCategoryGap: 50,
      barWidth: 15,
      yAxisIndex: 1,
      itemStyle: {
        color: 'none',
        borderColor: '#00c1de',
        borderWidth: 3,
        barBorderRadius: 15
      },
      data: [100, 100, 100, 100, 100]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 自适应
window.addEventListener('resize', function () {
  myChart.resize();
});
